<!-- 基础信息 -->
<template>
    <div class="outer">
        <el-form ref="form" :model="form" label-width="7.29vw">

            <div class="keyId select" v-if="form.is_mine == 1">
                <el-form-item label-width="9.37vw">
                    <el-form-item label="第一主委：" label-width="7.29vw">
                        <el-select filterable v-model="form.owner" placeholder="请输入用户">
                            <el-option v-for="item in users" :key="item.id" :label="item.username"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin: 1rem 0;" label="收益账号：" label-width="7.29vw">
                        <el-select filterable v-model="form.income" placeholder="请输入用户">
                            <el-option v-for="item in users" :key="item.id" :label="item.username"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="执行主委：" label-width="7.29vw">
                        <el-select filterable v-model="form.helper" multiple placeholder="请输入用户">
                            <el-option v-for="item in users" :key="item.id" :label="item.username"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
            </div>
            <el-form-item label="专栏定价:">
                <el-radio-group v-model="form.is_free">
                    <el-radio :label=1>免费</el-radio>
                    <el-radio style="margin-left: 3.5rem;" :label=2>
                        收费
                    </el-radio>
                </el-radio-group>
                <div class="fix_o">【 现价：<input @focus="form.is_free = 2" v-model="form.price" type="number" />元
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;原价：<input @focus="form.is_free = 2" v-model="form.old_price"
                        type="number" />元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 帮卖佣金：<input @focus="form.is_free = 2"
                        v-model="form.bm_price" type="number" />元 】
                </div>
            </el-form-item>
            <div class="select">
                <el-form-item label="文库来源:">
                    <el-radio-group v-model="form.source">
                        <el-radio :label=1>专栏原发文库</el-radio>
                        <el-radio :label=2>
                            全站相关文库，依据标签
                        </el-radio>
                    </el-radio-group>
                    <div class="tag">
                        <el-select :popper-append-to-body="false" filterable remote v-model="form.art_topics" multiple
                            allow-create default-first-option placeholder="请输入标签名称" @change="onChange"
                            :remote-method="getInput" width="100px" @visible-change="isopen">
                            <el-option v-for="item in topic" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                            <el-option disabled class="load-more" v-if="showMore">
                                <span @click="load2">加载更多...</span>
                            </el-option>
                        </el-select>
                        <!-- 
                        <el-select filterable v-model="form.art_topics" multiple placeholder="请选择标签">
                            <el-option v-for="item in topic" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select> -->
                    </div>
                </el-form-item>
            </div>
            <div class="select">
                <el-form-item label="专栏推荐:">
                    <el-select filterable v-model="form.reco" multiple placeholder="请选择专栏"
                        :popper-append-to-body="false">
                        <el-option v-for="item in cols" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        <el-option disabled class="load-more" v-if="showMore1">
                            <span @click="loadc">加载更多...</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="功能设置:">
                <el-checkbox v-model="form.is_visit" v-if="form.is_free == 1">许可访问模式[专栏免费时生效]</el-checkbox>
                <el-checkbox v-model="form.off_review">关闭评论</el-checkbox>
                <el-checkbox v-model="form.off_gift">关闭打赏</el-checkbox>
            </el-form-item>
            <div class="select" style="display: inline-block;">
                <el-form-item label="专栏批次:">

                    <el-radio-group v-model="form.is_deadline">
                        <el-radio :label=1>无固定期限</el-radio>
                        <el-radio style="margin-left: 2rem;" :label=2>固定期限
                        </el-radio>
                    </el-radio-group>

                </el-form-item>
            </div>
            <div class="fix_o" style="margin-left: 1rem;">
                <input v-if="!form.start_time" @focus="form.is_deadline = 2" type="date" v-model="form.start_time">
                <input v-else @focus="form.is_deadline = 2" type="date" v-model="form.start_time" disabled>
                <span>到</span>
                <input @focus="form.is_deadline = 2" type="date" v-model="form.end_time">
            </div>

            <div class="select">
                <el-form-item label="专栏介绍:">
                    <div class="edit" style="">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                            :mode="mode" />
                        <Editor style="height:500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig"
                            :mode="mode" @onCreated="onCreated" />
                    </div>
                </el-form-item>
            </div>


            <div>
                <el-form-item>
                    <div class="btns">
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { baseUrl } from '@/apis/index'

export default {
    components: { Editor, Toolbar },

    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: {
                excludeKeys: [
                    'insertLink',
                    'group-video',
                    'fullScreen'
                ]
            },
            editorConfig: {

            },
            mode: 'default', // or 'simple'

            form: {
                id: '',
                owner: '',
                income: '',
                helper: [],
                is_free: 1,
                price: '',
                old_price: '',
                bm_price: '',
                source: 1,
                art_topics: [],
                reco: [],
                start_time: '',
                end_time: '',
                is_visit: false,
                off_review: false,
                off_gift: false,
                is_deadline: 1
            },
            dialogVisible: false,
            users: [],
            cols: [],


            totalPaget: 1,
            pageNumt: 1,
            topic: [],
            t_keyword: '',
            loadingt: false,
            newlist: [], // 请求参数数组
            choose: [], // 已选标签数组
            old_list: [], // 已绑定标签选择列表
            showMore: false,


            totalPagec: 1,
            pageNumc: 1,
            loadingc: false,
            showMore1: false

        }
    },
    created() {
        this.getUsers()
        this.getCols()
        this.editorConfig = {
            MENU_CONF: {
                uploadImage: {
                    server: baseUrl + "user/Upload/one",
                    headers: {
                        'xx-token': localStorage.getItem('token'),
                        'xx-device-type': 'web'
                    },
                    fieldName: 'file',
                    onBeforeUpload(file) {
                        console.log(file);

                        return file


                    },
                    onSuccess(file, res) {          // JS 语法
                        console.log(`${file.name} 上传成功`, res)
                    },
                    customInsert(res, insertFn) {
                        insertFn(res.data.url)
                    }
                },
            }
        }
    },
    mounted() {
        let id = parseInt(this.$route.query.id)
        if (id) {
            this.form.id = id
            this.getColOpe(id)
        }
    },

    methods: {
        // 绑定专栏列表
        getCols() {
            this.loadingc = true

            let params = {
                page: this.pageNumc,
                col_id: parseInt(this.$route.query.id)
            }
            this.$api.getCols(params).then(res => {
                if (res.data.code == 1) {
                    let response = res.data.data
                    this.totalPagec = response.last_page
                    if (this.totalPagec <= this.pageNumc) {
                        this.showMore1 = false
                    } else {
                        this.showMore1 = true
                    }
                    this.cols = this.cols.concat(response.data)
                    this.loadingc = false
                }
            })
        },
        loadc() {
            var page = this.pageNumc
            //如果请求未结束就返回不连续请求
            if (this.loadingc) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPagec) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumc = page
            this.getCols()
        },
        reset() {

            this.totalPaget = 1,
                this.pageNumt = 1,
                this.loadingt = false,
                this.t_keyword = '',
                this.showMore = false
            this.topic = []
        },

        // 关闭列表的时候
        isopen(e) {
            if (!e) {
                this.reset()
            }
        },
        load2() {
            var page = this.pageNumt
            //如果请求未结束就返回不连续请求
            if (this.loadingt) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPaget) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumt = page
            this.getTopic()
        },

        getInput(keyword) {
            this.topic = this.old_list
            if (!keyword) {
                this.reset()

                return;
            }

            this.t_keyword = keyword
            this.getTopic()

        },

        // select选中后
        onChange(e) {
            // 重做选中的标签数组

            this.newlist = e.map(item => {
                return typeof item === 'string' ? { name: item } : { id: item };
            });
        },

        // 标签库
        getTopic() {
            this.loadingt = true
            let params = {
                keyword: this.t_keyword,
                page: this.pageNumt,
                ids: this.ids
            }

            this.$api.searchTopic(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    this.totalPaget = response.last_page
                    if (this.totalPaget <= this.pageNumt) {
                        this.showMore = false
                    } else {
                        this.showMore = true
                    }
                    if (this.ids && !this.keyowrd) {
                        this.old_list = response.data
                        console.log('old_list', this.old_list)

                    }

                    this.loadingt = false
                    this.topic = this.topic.concat(response.data);

                }
            })
        },


        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            console.log(editor.getAllMenuKeys());


            // const curToolbarConfig = toolbar.getConfig()
            console.log(toolbar) // 当前菜单排序和分组

        },

        // 绑定专栏列表
        getColOpe(id) {
            let params = {
                id
            }
            this.$api.getColOpe(params).then(res => {
                console.log(res)
                if (res.data.code == 1) {
                    this.form = res.data.data
                    this.html = res.data.data.content
                    if (this.form.art_topics) {
                        this.ids = this.form.art_topics
                        this.getTopic()
                    }
                }
            })
        },
        // 绑定专栏列表
        // getCols() {
        //     this.$api.getCols().then(res => {
        //         console.log(res)
        //         if (res.data.code == 1) {
        //             this.cols = res.data.data
        //         }
        //     })
        // },

        // 账号列表
        getUsers() {
            this.$api.getUsers().then(res => {
                if (res.data.code == 1) {
                    this.users = res.data.data
                }
            })
        },
        handleAvatarSuccess(res, file) {
            console.log(file.raw);
            this.form.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        },
        onSubmit() {
            this.form.content = this.html

            this.form.is_visit = this.form.is_visit ? 1 : 2
            this.form.off_gift = this.form.off_gift ? 1 : 2
            this.form.off_review = this.form.off_review ? 1 : 2
            this.form.art_topics = this.newlist
            let params = this.form
            console.log('submit!', this.form);

            this.$api.setColOpe(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.getColOpe(this.form.id)
                }
            })
        }
    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.outer {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0 !important;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0 !important;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 2rem;
    color: #8c939d;
    width: 10rem;
    height: 10rem;
    line-height: 10rem;
    text-align: center;
    border: 0.01rem dashed #8c939d;
}

.avatar {
    width: 10rem;
    height: 10rem;
    display: block;
}

.fix_o {
    display: inline-block;
    color: #000;

    input {
        border: none;
        border-bottom: 0.05rem solid #000;
        outline: none;
        font-size: 22px;
        width: 165px;
        font-family: 微软雅黑;
    }
}

.select {
    .tag {
        display: inline-block;
        padding-left: 0.83rem;
    }
}
.edit{
    border: 1px solid #ccc;width: 1100px
}
</style>